জাভাস্ক্রিপ্ট এইচটিএমএল ডোম (JS HTML DOM)

Web Development- জাভাস্ক্রিপ্ট (JavaScript) - জাভাস্ক্রিপ্ট এইচটিএমএল ডোম (JS HTML DOM) -

Completed

376

Completed

376

জাভাস্ক্রিপ্ট HTML DOM (Document Object Model) হলো একটি প্রোগ্রামিং ইন্টারফেস যা HTML ডকুমেন্টকে অবজেক্ট হিসেবে উপস্থাপন করে। DOM এর মাধ্যমে জাভাস্ক্রিপ্ট ব্যবহার করে ওয়েব পেজের বিভিন্ন উপাদান যেমন টেক্সট, ইমেজ, লিঙ্ক, ফর্ম ইত্যাদি পরিবর্তন, ম্যানিপুলেট এবং নিয়ন্ত্রণ করা যায়। এটি ডেভেলপারদের ডাইনামিক এবং ইন্টারঅ্যাকটিভ ওয়েব পেজ তৈরি করতে সহায়তা করে।

DOM কি?

DOM হলো একটি কাঠামোগত মডেল যা HTML ডকুমেন্টের প্রতিটি উপাদানকে একটি নোড হিসেবে প্রতিনিধিত্ব করে। এটি একটি ট্রি স্ট্রাকচার যেখানে প্রতিটি নোড ডকুমেন্টের একটি অংশ যেমন এলিমেন্ট, অ্যাট্রিবিউট বা টেক্সট নোড। DOM ব্রাউজারের মধ্যে ডকুমেন্ট লোড করার সময় তৈরি হয় এবং এটি স্ক্রিপ্টিং ভাষা যেমন জাভাস্ক্রিপ্ট দ্বারা সহজে অ্যাক্সেস এবং পরিবর্তন করা যায়।

<!DOCTYPE html>
<html>
<head>
    <title>DOM Example</title>
</head>
<body>
    <h1 id="title">Hello, World!</h1>
    <p class="description">This is a simple DOM example.</p>
</body>
</html>

উপরের HTML কোডে, DOM ট্রিতে html, head, title, body, h1, এবং p ইত্যাদি নোড থাকবে।

জাভাস্ক্রিপ্টের মাধ্যমে DOM এর সাথে যোগাযোগ

জাভাস্ক্রিপ্ট ব্যবহার করে DOM এর বিভিন্ন অংশে অ্যাক্সেস করা এবং পরিবর্তন করা যায়। এর জন্য বেশ কিছু পদ্ধতি এবং প্রোপার্টি রয়েছে, যা ডেভেলপারদের ওয়েব পেজের উপাদানগুলিকে নিয়ন্ত্রণ করতে সাহায্য করে।

এলিমেন্ট নির্বাচন করা

DOM এর মধ্যে নির্দিষ্ট এলিমেন্ট নির্বাচন করার জন্য বিভিন্ন পদ্ধতি ব্যবহার করা হয়:

getElementById: একটি নির্দিষ্ট আইডি সহ এলিমেন্ট নির্বাচন করে।
```
const title = document.getElementById('title');
console.log(title.textContent);  // আউটপুট: Hello, World!
```

getElementsByClassName: একটি নির্দিষ্ট ক্লাস সহ সব এলিমেন্ট নির্বাচন করে।

const descriptions = document.getElementsByClassName('description');
console.log(descriptions[0].textContent);  // আউটপুট: This is a simple DOM example.

querySelector: CSS সিলেক্টর ব্যবহার করে প্রথম এলিমেন্ট নির্বাচন করে।

const firstParagraph = document.querySelector('p.description');
console.log(firstParagraph.textContent);  // আউটপুট: This is a simple DOM example.

querySelectorAll: CSS সিলেক্টর ব্যবহার করে সব মিলিত এলিমেন্ট নির্বাচন করে।
```
const allParagraphs = document.querySelectorAll('p');
allParagraphs.forEach(paragraph => {
    console.log(paragraph.textContent);
});
```

এলিমেন্ট পরিবর্তন করা

নির্বাচিত এলিমেন্টগুলির কন্টেন্ট, স্টাইল বা অ্যাট্রিবিউট পরিবর্তন করা যায়:

কন্টেন্ট পরিবর্তন:

const title = document.getElementById('title');
title.textContent = 'Welcome to JavaScript DOM!';

স্টাইল পরিবর্তন:

const title = document.getElementById('title');
title.style.color = 'blue';
title.style.fontSize = '24px';

অ্যাট্রিবিউট পরিবর্তন:

const link = document.querySelector('a');
link.setAttribute('href', 'https://www.example.com');
link.textContent = 'Visit Example.com';

এলিমেন্ট যোগ করা এবং মুছে ফেলা

DOM এ নতুন এলিমেন্ট যোগ করা বা বিদ্যমান এলিমেন্ট মুছে ফেলা যায়:

নতুন এলিমেন্ট যোগ করা:

const newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a new paragraph added to the DOM.';
document.body.appendChild(newParagraph);

এলিমেন্ট মুছে ফেলা:

const title = document.getElementById('title');
title.remove();

ইভেন্ট হ্যান্ডলিং

ইভেন্ট হ্যান্ডলার ব্যবহার করে ইউজার ইন্টারঅ্যাকশন নিরীক্ষণ এবং প্রতিক্রিয়া দেওয়া যায়:

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
    alert('Button was clicked!');
});

এখানে, যখন ইউজার বোতামে ক্লিক করবে, একটি অ্যালার্ট প্রদর্শিত হবে।

সাধারণ DOM মেথড ও প্রোপার্টি

DOM ম্যানিপুলেশন সহজ করার জন্য জাভাস্ক্রিপ্টে বিভিন্ন মেথড এবং প্রোপার্টি রয়েছে:

innerHTML: এলিমেন্টের HTML কন্টেন্ট পরিবর্তন বা রিটার্ন করে।
```
const container = document.getElementById('container');
container.innerHTML = '<h2>New Content</h2>';
```
textContent: এলিমেন্টের টেক্সট কন্টেন্ট পরিবর্তন বা রিটার্ন করে।
```
const paragraph = document.querySelector('p');
paragraph.textContent = 'Updated paragraph text.';
```
classList: এলিমেন্টের ক্লাস ম্যানেজ করতে ব্যবহার করা হয়। যেমন, ক্লাস যোগ, মুছে ফেলা বা টগল করা।
```
const element = document.getElementById('myElement');
element.classList.add('active');
element.classList.remove('inactive');
element.classList.toggle('hidden');
```

setAttribute এবং getAttribute: এলিমেন্টের অ্যাট্রিবিউট সেট বা রিটার্ন করে।

const image = document.querySelector('img');
image.setAttribute('src', 'image.png');
const src = image.getAttribute('src');
console.log(src);  // আউটপুট: image.png

উদাহরণ: একটি সম্পূর্ণ DOM ম্যানিপুলেশন

নিচে একটি সম্পূর্ণ উদাহরণ দেওয়া হলো যা DOM ম্যানিপুলেশনের বিভিন্ন দিক প্রদর্শন করে:

<!DOCTYPE html>
<html>
<head>
    <title>DOM Manipulation Example</title>
</head>
<body>
    <h1 id="header">Welcome!</h1>
    <button id="changeTextButton">Change Text</button>
    <button id="addElementButton">Add Element</button>
    <div id="content"></div>

    <script>
        // টেক্সট পরিবর্তন করার ইভেন্ট
        const header = document.getElementById('header');
        const changeTextButton = document.getElementById('changeTextButton');

        changeTextButton.addEventListener('click', () => {
            header.textContent = 'Hello, JavaScript DOM!';
            header.style.color = 'green';
        });

        // নতুন এলিমেন্ট যোগ করার ইভেন্ট
        const addElementButton = document.getElementById('addElementButton');
        const contentDiv = document.getElementById('content');

        addElementButton.addEventListener('click', () => {
            const newParagraph = document.createElement('p');
            newParagraph.textContent = 'This paragraph was added dynamically!';
            newParagraph.style.fontStyle = 'italic';
            contentDiv.appendChild(newParagraph);
        });
    </script>
</body>
</html>

এই উদাহরণে:

একটি হেডার আছে যা বোতামে ক্লিক করলে টেক্সট এবং রঙ পরিবর্তন হবে।
আরেকটি বোতামে ক্লিক করলে একটি নতুন প্যারাগ্রাফ ডাইনামিকভাবে যোগ হবে।

সারাংশ

জাভাস্ক্রিপ্ট HTML DOM ওয়েব পেজের সাথে ইন্টারঅ্যাক্ট করার একটি শক্তিশালী মাধ্যম। DOM এর মাধ্যমে ডেভেলপাররা ওয়েব পেজের উপাদানগুলি নির্বাচন, পরিবর্তন, যোগ, মুছে এবং ইভেন্ট হ্যান্ডল করতে পারে। এটি ওয়েব পেজকে ডাইনামিক এবং ইন্টারঅ্যাকটিভ করে তোলে, যা ইউজারদের জন্য উন্নত অভিজ্ঞতা প্রদান করে। DOM ম্যানিপুলেশনের জন্য বিভিন্ন মেথড, প্রোপার্টি এবং ইভেন্ট হ্যান্ডলার উপলব্ধ, যা কোডকে আরও কার্যকর এবং রক্ষণাবেক্ষণযোগ্য করে তোলে।

ডোম পরিচিতি (DOM Intro)

ডোম মেথড (DOM Method)

ডোম ডকুমেন্ট (DOM Document)

ডোম এলিমেন্ট (DOM Element)

ডোম এইচটিএমএল (DOM HTML)

ডোম ফর্ম (DOM Form)

ডোম সিএসএস (DOM CSS)

ডোম অ্যানিমেশন (DOM Animation)

ডোম ইভেন্ট (DOM Event)

ডোম ইভেন্টলিসেনার (DOM EventListener)

ডোম নেভিগেশন (DOM Navigation)

ডোম নোড (DOM Node)

ডোম কালেকশন (DOM Collection)

ডোম নোড লিস্ট (DOM Nodelist)

DOM কি?

<!DOCTYPE html>
<html>
<head>
    <title>DOM Example</title>
</head>
<body>
    <h1 id="title">Hello, World!</h1>
    <p class="description">This is a simple DOM example.</p>
</body>
</html>

উপরের HTML কোডে, DOM ট্রিতে html, head, title, body, h1, এবং p ইত্যাদি নোড থাকবে।

জাভাস্ক্রিপ্টের মাধ্যমে DOM এর সাথে যোগাযোগ

এলিমেন্ট নির্বাচন করা

getElementById: একটি নির্দিষ্ট আইডি সহ এলিমেন্ট নির্বাচন করে।
```
const title = document.getElementById('title');
console.log(title.textContent);  // আউটপুট: Hello, World!
```

getElementsByClassName: একটি নির্দিষ্ট ক্লাস সহ সব এলিমেন্ট নির্বাচন করে।

const descriptions = document.getElementsByClassName('description');
console.log(descriptions[0].textContent);  // আউটপুট: This is a simple DOM example.

querySelector: CSS সিলেক্টর ব্যবহার করে প্রথম এলিমেন্ট নির্বাচন করে।

const firstParagraph = document.querySelector('p.description');
console.log(firstParagraph.textContent);  // আউটপুট: This is a simple DOM example.

querySelectorAll: CSS সিলেক্টর ব্যবহার করে সব মিলিত এলিমেন্ট নির্বাচন করে।
```
const allParagraphs = document.querySelectorAll('p');
allParagraphs.forEach(paragraph => {
    console.log(paragraph.textContent);
});
```

এলিমেন্ট পরিবর্তন করা

কন্টেন্ট পরিবর্তন:

const title = document.getElementById('title');
title.textContent = 'Welcome to JavaScript DOM!';

স্টাইল পরিবর্তন:

const title = document.getElementById('title');
title.style.color = 'blue';
title.style.fontSize = '24px';

অ্যাট্রিবিউট পরিবর্তন:

const link = document.querySelector('a');
link.setAttribute('href', 'https://www.example.com');
link.textContent = 'Visit Example.com';

এলিমেন্ট যোগ করা এবং মুছে ফেলা

DOM এ নতুন এলিমেন্ট যোগ করা বা বিদ্যমান এলিমেন্ট মুছে ফেলা যায়:

নতুন এলিমেন্ট যোগ করা:

const newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a new paragraph added to the DOM.';
document.body.appendChild(newParagraph);

এলিমেন্ট মুছে ফেলা:

const title = document.getElementById('title');
title.remove();

ইভেন্ট হ্যান্ডলিং

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
    alert('Button was clicked!');
});

এখানে, যখন ইউজার বোতামে ক্লিক করবে, একটি অ্যালার্ট প্রদর্শিত হবে।

সাধারণ DOM মেথড ও প্রোপার্টি

innerHTML: এলিমেন্টের HTML কন্টেন্ট পরিবর্তন বা রিটার্ন করে।
```
const container = document.getElementById('container');
container.innerHTML = '<h2>New Content</h2>';
```
textContent: এলিমেন্টের টেক্সট কন্টেন্ট পরিবর্তন বা রিটার্ন করে।
```
const paragraph = document.querySelector('p');
paragraph.textContent = 'Updated paragraph text.';
```
classList: এলিমেন্টের ক্লাস ম্যানেজ করতে ব্যবহার করা হয়। যেমন, ক্লাস যোগ, মুছে ফেলা বা টগল করা।
```
const element = document.getElementById('myElement');
element.classList.add('active');
element.classList.remove('inactive');
element.classList.toggle('hidden');
```

setAttribute এবং getAttribute: এলিমেন্টের অ্যাট্রিবিউট সেট বা রিটার্ন করে।

const image = document.querySelector('img');
image.setAttribute('src', 'image.png');
const src = image.getAttribute('src');
console.log(src);  // আউটপুট: image.png

উদাহরণ: একটি সম্পূর্ণ DOM ম্যানিপুলেশন

<!DOCTYPE html>
<html>
<head>
    <title>DOM Manipulation Example</title>
</head>
<body>
    <h1 id="header">Welcome!</h1>
    <button id="changeTextButton">Change Text</button>
    <button id="addElementButton">Add Element</button>
    <div id="content"></div>

    <script>
        // টেক্সট পরিবর্তন করার ইভেন্ট
        const header = document.getElementById('header');
        const changeTextButton = document.getElementById('changeTextButton');

        changeTextButton.addEventListener('click', () => {
            header.textContent = 'Hello, JavaScript DOM!';
            header.style.color = 'green';
        });

        // নতুন এলিমেন্ট যোগ করার ইভেন্ট
        const addElementButton = document.getElementById('addElementButton');
        const contentDiv = document.getElementById('content');

        addElementButton.addEventListener('click', () => {
            const newParagraph = document.createElement('p');
            newParagraph.textContent = 'This paragraph was added dynamically!';
            newParagraph.style.fontStyle = 'italic';
            contentDiv.appendChild(newParagraph);
        });
    </script>
</body>
</html>

এই উদাহরণে:

একটি হেডার আছে যা বোতামে ক্লিক করলে টেক্সট এবং রঙ পরিবর্তন হবে।
আরেকটি বোতামে ক্লিক করলে একটি নতুন প্যারাগ্রাফ ডাইনামিকভাবে যোগ হবে।

জাভাস্ক্রিপ্ট এইচটিএমএল ডোম (JS HTML DOM)

DOM কি?

জাভাস্ক্রিপ্টের মাধ্যমে DOM এর সাথে যোগাযোগ

এলিমেন্ট নির্বাচন করা

এলিমেন্ট পরিবর্তন করা

এলিমেন্ট যোগ করা এবং মুছে ফেলা

ইভেন্ট হ্যান্ডলিং

সাধারণ DOM মেথড ও প্রোপার্টি

উদাহরণ: একটি সম্পূর্ণ DOM ম্যানিপুলেশন

সারাংশ

DOM কি?

জাভাস্ক্রিপ্টের মাধ্যমে DOM এর সাথে যোগাযোগ

এলিমেন্ট নির্বাচন করা

এলিমেন্ট পরিবর্তন করা

এলিমেন্ট যোগ করা এবং মুছে ফেলা

ইভেন্ট হ্যান্ডলিং

সাধারণ DOM মেথড ও প্রোপার্টি

উদাহরণ: একটি সম্পূর্ণ DOM ম্যানিপুলেশন

সারাংশ

Web Development

স্যাট অ্যাকাডেমী অ্যাপ

All Notifications

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Promotion